import React, { useState, useEffect, useRef, useMemo } from 'react';
import './frame.css'
import ReactECharts from 'echarts-for-react';
interface ChildProps {
    title: string;//标题
    newmonay: any,//分类数据
    oldmonay: any
}

const Cost: React.FC<ChildProps> = ({ title, newmonay, oldmonay }) => {


    useEffect(() => {

    }, [])
    //////////echarts图表
    //////////echarts图表
    const option = {
        xAxis: {
            type: 'category',

            data: []
        },
        yAxis: {
            type: 'value',
            min: 0,      // 设置y轴最小值
            max: 10,
            axisLabel: {
                show: false,  // 不显示坐标轴标签
                padding: [0, 0, 0, 0],
            },
            axisLine: {
                show: false,  // 隐藏坐标轴线
            },
            axisTick: {
                show: false,  // 隐藏刻度线
            }
        },
        series: [
            {
                data: [5, 7, 4, 6],
                type: 'line',
                areaStyle: {}
            }
        ],
        grid: {
            left: 0,   // 减少左侧外边距
            right: 0,  // 减少右侧外边距
            top: 0,    // 减少上方外边距
            bottom: 0  // 减少下方外边距
        }
    };
    //////////echarts图表
    //////////echarts图表
    return (
        <>
            <div style={{ fontSize: '20px', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: '0.5px solid #f3f3f3', width: '25%', height: '30%', padding: '20px' }}>
                {/* <p>{title}</p> */}
                <p>{title}</p>
                <p><span style={{ fontWeight: '700', fontSize: '28px' }}>{newmonay}</span></p>
                {newmonay > oldmonay ?
                    <p>较昨日增加{(((newmonay - oldmonay) / oldmonay) * 100).toFixed(1)}%<img src="/wjimgs/up.png" style={{ width: '25px', height: '20px', marginLeft: '10px' }} /></p>
                    :
                    <p>较昨日减少{(((oldmonay - newmonay) / oldmonay) * 100).toFixed(0)}%<img src="/wjimgs/dwon.png" style={{ width: '16px', height: '12px', marginLeft: '10px' }} /></p>}<div style={{ position: 'absolute', top: '10px', right: '20px' }}></div>
                <div style={{ position: 'absolute', top: '10px', right: '0' }}><ReactECharts option={option} style={{ height: '70px', width: '110px' }} /></div>
            </div>
        </>
    );
}

export default Cost;